<template>
  <div id="map"></div>
</template>

<script setup>
  import axios from 'axios';
  import { onMounted } from 'vue';

  import Map from 'ol/Map';
  import View from 'ol/View';
  import { GeoJSON } from 'ol/format';
  import { Vector as VectorSource, XYZ } from 'ol/source';
  import { Style, Stroke, Fill, Icon, Text } from 'ol/style';
  import { Vector as VectorLayer, Tile as TileLayer } from 'ol/layer';
  import Feature from 'ol/Feature';
  import { Point } from 'ol/geom';
  import { fromLonLat } from 'ol/proj';
  // 图片地址
  const url = new URL('../../assets/img/Vue.png', import.meta.url).href;
  // json地址
  const jsonUrl = new URL('../../lib/down.json', import.meta.url).href;
  // 之前多边形的填充色没有绘制处理是因为json数据的问题，跟代码无关
  // new ol.style.Fill()只对Features或者layer生效
  let map = null;
  let lineLayer = null;
  let imgTextLayer = null;
  // 根据地理信息添加多边形
  function addGeoJson(json) { 
    let features = (new GeoJSON({ featureProjection: 'EPSG:3857' })).readFeatures(json)
    var vectorSource = new VectorSource({ features: features });
    let styles = new Style({
      stroke: new Stroke({
        color: 'yellow',
        width: 1.25
      }),
      fill: new Fill({
        color: 'red'
      })
    });
    features[0].setStyle(styles);

    lineLayer = new VectorLayer({
      zIndex: 667,
      source: vectorSource
    });
    map.addLayer(lineLayer);  // 把图层添加到地图
    // 删除图层: map.removeLayer(lineLayer)
  }
  // 根据经纬度数据添加地图标注
  function addImgText(data) {
    let dataSource = new VectorSource({
      features: []
    });
    data.forEach(item => {
      let iconFeature = new Feature({
        geometry: new Point(fromLonLat(item.lntlat))
      });
      let iconStyle = new Style({
        image: new Icon({
          anchor: [0.5, 60],              //锚点
          anchorOrigin:'top-right',       //锚点源
          anchorXUnits: 'fraction',       //锚点X值单位
          anchorYUnits: 'pixels',         //锚点Y值单位
          offsetOrigin: 'top-right',      //偏移原点
          opacity: 0.75,
          src: url,  //图标的URL,
          scale: 0.2
        }),
        text: new Text({
          textAlign: 'center',            //位置
          textBaseline: 'middle',         //基准线
          font: 'normal 14px 微软雅黑',    //文字样式
          text: item.name,      //文本内容
          fill: new Fill({       //文本填充样式（即文字颜色)
            color: '#000'
          }),
          stroke: new Stroke({
            color: '#F00', 
            width: 2
          })
        })
      });
      iconFeature.setStyle(iconStyle);
      dataSource.addFeature(iconFeature);
    });
    imgTextLayer = new VectorLayer({
      source: dataSource,
      zIndex: 668
    })
    map.addLayer(imgTextLayer);
  }
  // 地理位置数据
  const lotlatData = [
    {
      lntlat: [118.802997,32.063428],
      name: '南京'
    },
    {
      lntlat: [117.235166,31.825842],
      name: '合肥'
    }
  ];
    
  onMounted(() => {
    map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new XYZ({
            url: 'http://t0.tianditu.com/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=d3322c0d714d386b3bc91e3d24f37390'
          })
        })
      ],
      view: new View({
        center: fromLonLat([114.313311,30.597721]),
        zoom: 5
      })
    });
    axios.get(jsonUrl).then(res => {
      addGeoJson(res.data);
      addImgText(lotlatData);
    })
  })
</script>

<style lang="less" scoped>
  #map {
    width: 100vw;
    height: 100vh;
  }
</style>